<template>
  <div class="wh-full mx-auto flex-center flex-col lg:flex-row">
    <img class="min-w-[23.4375rem] sm:w-150" :src="errImg" :alt="error" />
    <div class="w-75">
      <div class="oops mb-5 text-[2rem] font-bold">OOPS！</div>
      <div class="info text-gray mb-7 text-[0.8125rem]">{{ tips }}</div>
      <div class="headline mb-2.5 text-xl font-bold text-[#222]">{{ title }}</div>
      <div class="info text-gray mb-7 text-[0.8125rem]">{{ description }}</div>
      <el-button icon="back" type="success" class="btn h-9 w-28 mb-10" @click="back">返回上一页</el-button>
      <el-button icon="house" type="primary" class="btn h-9 w-28 mb-10" @click="toHome">返回首页</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
import img401 from '@/assets/images/error/401.svg';
import img404 from '@/assets/images/error/404.svg';

defineOptions({ name: 'ErrorPage' });

const props = defineProps({
  error: {
    type: String as PropType<'401' | '404'>,
    default: '404',
  },
  tips: {
    type: String,
    default: '出错了，请稍后再试！',
  },
  title: {
    type: String,
    default: '发生了意料之外的情况',
  },
  description: {
    type: String,
    default: '点击下方按钮返回上一页，或直接返回首页。',
  },
});

const imgMap = {
  401: img401,
  404: img404,
};
const errImg = computed(() => imgMap[props.error]);

const router = useRouter();
const toHome = () => router.push('/');
const back = () => router.back();
</script>

<style lang="scss" scoped>
@mixin slide-up-animation($delay: 0s) {
  opacity: 0;
  animation-name: slideUp;
  animation-duration: 0.5s;
  animation-delay: $delay;
  animation-fill-mode: forwards;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.oops {
  color: var(--el-color-primary);

  @include slide-up-animation(0s);
}

.headline {
  @include slide-up-animation(0.1s);
}

.info {
  @include slide-up-animation(0.2s);
}

.btn {
  @include slide-up-animation(0.3s);
}
</style>
